// 颜色
$main-color:#007DFF;
$auxiliary-color:#F6F8FA;
$border-color:#D8D8D8;
$line-color:#E1E6ED;
// 字体大小
$font-size:14px;
$font-sizes:18px;
$font-size1:12px;
.active{
    border: 1px solid #007DFF !important;
    box-sizing: border-box;
}
.add_oder{
    background: $auxiliary-color;
    &-top{
        flex: 1;
        background-color: #fff;
       
        &-header{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            min-height: 58px;
            max-height: 58px;
            border-bottom: 1px solid $border-color;
            box-sizing: border-box;
            align-items: center;
            .title{
                padding-left: 36px;
                font-size: $font-sizes;
                font-weight: 400;
            }
            .title::before{
                content: '';
                width: 6px;
                height: 6px;
                background-color: $main-color;
                position: absolute;
                top: 25px;
                left: 20px;
                border-radius: 50%;
            }
            .btn{
                display: flex;
                align-items: center;
                font-size: $font-size;
                span{
                    margin: 0 20px;
                    color: $main-color;
                    cursor: pointer;
                }
                span:nth-child(2){
                    margin: 0;
                    display: inline-block;
                    width: 4px;
                    height: auto;
                    background-color: $auxiliary-color;
                    color: $line-color;
                }
            }
        }
        &-content{
            display: flex;
            flex-direction: column;
            padding: 20px;
            
            .step{
                flex: 1;
                max-height: 92px;
                min-height: 92px;
                // border-bottom: 1px solid $line-color;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .form{
                border: 1px solid $line-color;
                padding: 20px;
               &_top{
                .user-title{
                  display: flex;
                  align-items: center;
                  justify-content: start;
                  margin: 10px 0;
                  p{
                    color: red;
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    span{
                      color: #4E5969;
                      margin-left: 4px;
                      font-size: 14px;
                    }
                  }
                }
                .serch{
                    width: 100%;
                    position: relative;
                    .user_addss{
                        width: 100%;
                        height: 450px;
                        background-color: #fff;
                        box-shadow: 0px 8px 32px 0px rgba(0,0,0,0.16);
                        position: absolute;
                        left: 0;
                        top: 40px;
                        z-index: 999;
                        border-radius: 10px;
                        padding: 20px;
                        overflow: hidden;
                        box-sizing: border-box;
                        .list{
                            height: 360px;
                            overflow-y: scroll;
                            ul{
                                li{
                                    background: #FFFFFF;
                                    border-radius: 4px 4px 4px 4px;
                                    border: 1px solid #E5E8EF;
                                    box-sizing: border-box;
                                    padding: 16px;
                                    cursor: pointer;
                                    margin: 0 0 10px 0;
                                    display: flex;
                                    justify-content: space-between;
                                    div:nth-child(1){
                                        p{
                                            font-size: $font-size1;
                                            color: #4E5969 ;
                                            span{
                                                color: #86909C;
                                                margin-right: 6px;
                                            }
                                        }
                                        p:nth-child(1){
                                            font-size: $font-size;
                                        }
                                    }
                                    div:nth-child(2){
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                    
                                    
                                }
                            }
                        }
                        .btn{
                            height: 50px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                        }
                    }
                }
                .btn{
                    width: 10%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }
                .customer_message_list{
                    height: 88px;
                    background: $auxiliary-color;
                    width: 100%;
                    position: relative;
                    .custom_message{
                        display: flex;
                        p{
                            margin-left: 160px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                        p:nth-child(1){
                            margin-left: 20px;
                        }
                    }
                    p{
                        text-align: center;
                        line-height: 88px;
                        font-size: 12px;
                        color: #86909C;
                    }
                    .btn_add{
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);

                    }
                }
                .order_status{
                    display: flex;
                    align-items: center;
                    .title{
                        margin: 0 10px 0 0;
                    }
                }
                .address{
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                  div:nth-child(2){
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span{
                      display: inline-block;
                      padding: 4px 10px;
                      color: $main-color;
                      font-size: $font-size;
                      cursor: pointer;
                    }
                    span:nth-child(2){
                      display: inline-block;
                      width: 4px;
                      height: 18px;
                      background: #E1E6ED;
                      border-radius: 2px 2px 2px 2px;
                      padding: 0;
                    }
                    span:nth-child(3){
                      padding-right: 0;
                    }
                  }
                }
               } 
            }
        }
    }
    &-botton{
        flex: 1;
        // height: 300px;
        background-color: #fff;
        margin-top: 28px;
        padding: 20px;
        overflow: hidden;
        .header{
            display: flex;
            justify-content: space-between;
        }
        .product_information{
            border: 1px solid $line-color;
            box-sizing: border-box;
            margin: 20px 0;
        }
        .remarks{
            display: flex;
            align-items: center;
            span{
                display: inline-block;
                width: 80px;
            }
            :deep(.el-textarea__inner){
              background: #F2F3F5;
            }
            :deep(.el-input__count){
              background-color: transparent;
            }
        }
        .total_price{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0 30px 0;
          &-left{
            flex: 2;
            display: flex;
            div{
              display: flex;
              align-items: center;
              margin-right: 10px;
              flex-wrap: nowrap;
              span{
                font-size: 14px;
                color: #4E5969;
                margin: 0 6px 0 0;
                width: 100px;
              }
              :deep(.el-input__wrapper){
                background: #F2F3F5;
              }
            }
          }
          &-right{
            flex: 1;
            display: flex;
            justify-content: flex-end;
            span{
              color: red;
              font-weight: bold;
            }
          }
        }
    }
}
/*表头*/
.table-head {
    background: #F2F6FC;
    align-items: center;
    height: 40px;
    // margin-bottom: 10px;
  
    .el-col:nth-child(1) {
      display: flex;
      align-items: center;
  
      .all {
        width: 40px;
        // @include flex-center;
      }
  
      .image-title {
        display: inline-block;
        width: 98px;
      }
    }
  
  
    .sort {
      display: flex;
      align-items: center;
  
      ::v-deep(.el-icon) {
        color: #C0C4CC;
        margin-left: 8px;
      }
    }
  }
.table-list {
    .el-checkbox-group{
      line-height: unset;
      font-size: unset;
    }
    .el-col {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #E1E6ED;
      border-left: 1px solid #E1E6ED;
      justify-content: center;
    }
    .el-col:nth-child(1){
      justify-content: start;
    }
    .el-col:last-child {
      border-right: 1px solid #E1E6ED;
    }
  
    // .goods {
    //   margin-bottom: 12px;
  
    //   .business-name {
    //     display: flex;
    //     background: #F2F6FC;
    //     // color: #007DFF;
    //     height: 40px;
    //     font-size: 14px;
    //     line-height: 40px;
    //     flex-direction: row;
    //     .left{
    //       flex: 3;
    //       display: flex;
    //       justify-content: space-between;
    //       .all {
    //         width: 40px;
    //       //   @include flex-center;
    
    //         ::v-deep(.el-checkbox__label) {
    //           padding: 0;
    //         }
    //       }
    //     }
    //     .right{
    //       flex: 1;
    //       display: flex;
    //       justify-content: flex-end;
    //       align-items: center;
    //       padding-right: 10px;
    //       p{
    //         span{
    //           color: #007DFF;
    //         }
    //       }
    //     }
        
    //   }
  
    //   .remark {
    //     font-size: 14px;
    //     border: 1px solid #ebeef5;
    //     border-top: none;
    //     padding: 12px;
    //     .label {
    //       color: #86909C;
    //       white-space: nowrap;
    //       margin-top: 4px;
    //     }
    //   }
  
    // }
  
    .table-operate {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
  
    .image {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      margin: 0 18px 0 40px;
    }
  
    .info {
      color: #86909C;
      font-size: 12px;
      line-height: 20px;
  
      .red {
        color: red;
      }
    }
  
    .el-input{
      margin:0 10px;
    }
  }
  
  /* 批量操作表单提示 */
  .tip {
    color: #86909C;
    font-size: 12px;
    line-height: 18px;
  }
  .top{
    width: 100%;
    height: 60px;
    // background-color: #007DFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .center{
    text-align: center;
    margin: 50px 0 50px 0;
  }
  .botton{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sucess-content{
    margin-bottom: 50px;
    p{
      text-align: center;
    }
    p:nth-child(1){
      font-size: 18px;
      color: #3D3D3D;
    }
    p:nth-child(2){
      font-size: 14px;
      color: #86909C;
      margin: 10px 0 24px 0;
    }
    div{
      p{
        text-align: center;
      }
      div{
        p{
          text-align: left;
          font-size: 14px;
        }
        p:nth-child(1){
          color: #3D3D3D;
          margin-bottom: 11px;
          font-weight: 600;
        }
        p:nth-child(2){
          color: #3D3D3D;
        }
        background: #F5F7FA;
        border-radius: 4px 4px 4px 4px;
        padding: 20px;
        overflow: hidden;
      }
    }
  }
  .err-content{
    div{
      p{
        text-align: center;
      }
      p:nth-child(1){
        margin: 20px 0 10px 0;
        font-size: 18px;
        color: #3D3D3D;
      }
      p:nth-child(2){
        margin-bottom: 24px;
        font-size: 14px;
        color: #86909C;
      }
      div{
        p{
          text-align: left;
          font-size: 14px !important;
          color: #4E5969 !important;
          margin: 0 0 10px 0 !important;
        }
        background: #F5F7FA;
        border-radius: 4px 4px 4px 4px;
        padding: 20px;
        overflow: hidden;
        margin-bottom: 50px;
      }
    }
  }
  // 列表样式
  .sp_content{
    display: flex;
    div:nth-child(1){
      flex: 1;
      max-width: 100px;
      min-width: 100px;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    div:nth-child(2){
      flex: 2;
      margin-left: 10px;
      p{
        font-size: 12px;
        color: #86909C;
      }
      p:nth-child(1){
        font-size: 14px;
        color: #3D3D3D;
      }
    }
  }